/**custom**/

@page-prefix-cls: ~"@{css-prefix}page";
@page-prefix-cls-small: ~"@{css-prefix}page-small";

@page: "@{primary-color}";
.@{page-prefix-cls} {
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-item{
    display: inline-block;
    vertical-align: middle;
    min-width: @page-btn-circle-size;
    height: @page-btn-circle-size;
    line-height: @page-btn-circle-size;
    margin-right: 10px;
    text-align: center;
    list-style: none;
    background-color: @page-btn-item-background;
    user-select: none;
    cursor: pointer;
    font-family: @font-family;
    font-size: @font-size-base;
    border: 1px solid @border-color-base;
    border-radius: @page-btn-border-radius;
    transition: border @transition-time @ease-in-out, color @transition-time @ease-in-out;
    
    p {
      font-family: @font-family;
      margin: 0 6px;
      text-decoration: none;
      color: @text-color;
    }

    &:hover {
      border-color: @primary-color;
      p {
          color: @primary-color;
      }
    }

    &-active {
      border-color: @primary-color;
      background-color: @primary-color;
      color: @page-item-font-active-color;
      p, &:hover p {
          color: @page-item-font-active-color;
      }
    }
  }

  &-item-jump-prev, &-item-jump-next {
    margin-right: 10px;
    &:after {
        content: "\e64c";
        font-family: "iconfont" !important;
        font-size: 14px;
        font-style: normal;
    }

    i{
        display: none;
    }
  }

  &-prev-text, &-next-text{
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    width: 80px;
    height: 40px;
    line-height: @page-btn-circle-size;
    list-style: none;
    text-align: center;
    cursor: pointer;
    color: @page-item-border-color;
    font-family: @font-family;
    font-size: @font-size-base;
    border: 1px solid @border-color-base;
    border-radius: @page-btn-border-radius;
    transition: all @transition-time @ease-in-out;
  }
  &-prev-text{
    margin-right: 10px;
  }
  &-prev &-prev-text{
    padding-right: 4px;
  }
  &-item-jump-prev,
  &-item-jump-prev{
    padding-right: 4px; 
  }
  &-prev,
  &-next,
  &-item-jump-prev,
  &-item-jump-next {
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    min-width: @page-btn-circle-size;
    height: @page-btn-circle-size;
    line-height: @page-btn-circle-size;
    list-style: none;
    text-align: center;
    cursor: pointer;
    color: @page-item-border-color;
    font-family: @font-family;
    border: 1px solid @border-color-base;
    border-radius: @page-btn-border-radius;
    transition: all @transition-time @ease-in-out;
  }

  &-prev,
  &-next {
    p{
      color: #666;
      font-size: @font-size-base;
    }
    &:hover{
      border-color: @primary-color;
      p{
        color: @primary-color;
      }
    }
  }
  
  &-disabled {
    cursor: @cursor-disabled;
    
    a {
        color: #ccc;
    }
    &:hover {
        border-color: @border-color-base;
        a {
            color: #ccc;
            cursor: @cursor-disabled;
        }
    }
  }

  &-text-disable{
    background-color:rgba(247,249,252,1);
    border-radius:4px;
    border:1px solid rgba(211,219,235,1);
    cursor: @cursor-disabled;
    p {
      color: #D3DBEB;
    }
  }

  &-options {
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
    &-sizer {
        display: inline-block;
        margin-right: 10px;
    }
    &-select {
      display: inline-block;
      margin-left: 0px;
    }
    &-elevator {
      display: inline-block;
      vertical-align: middle;
      height: @page-btn-circle-size;
      input {
        text-align: center;
        .input;
        border-radius: @page-btn-border-radius;
        margin: 0 8px;
        width: 40px;
        padding: 2px;
      }
    }
    
  }

  &-ok-div {
    display: inline-block;
    margin-left: 20px;
  }

  &-total{
    display: inline-block;
    padding-right: 10px;
    font-family: @font-family;
    font-size: @font-size-base;
  }
  &-custom-text, &-custom-text::hover{
    color: #F12
  }
  .sh-select {
    width: 90px;
    .sh-select-header {
      .header-ul {
        li {
          width: 100%;
        }
      }
    }
  }
}
.@{page-prefix-cls-small} {
  display: flex;
  justify-content: space-between;
  align-items: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-item{
    display: inline-block;
    vertical-align: middle;
    min-width: @page-btn-circle-size-small;
    height: @page-btn-circle-size-small;
    line-height: @page-btn-circle-size-small;
    margin-right: 5px;
    text-align: center;
    list-style: none;
    background-color: @page-btn-item-background;
    user-select: none;
    cursor: pointer;
    font-family: @font-family;
    // font-weight: 500;
    font-size: @font-size-base;
    border: 1px solid @border-color-base;
    border-radius: @page-btn-border-radius;
    //transition: all @transition-time @ease-in-out;
    transition: border @transition-time @ease-in-out, color @transition-time @ease-in-out;
    
    p {
      font-family: @font-family;
      margin: 0 6px;
      text-decoration: none;
      color: @text-color;
    }

    &:hover {
      border-color: @primary-color;
      p {
          color: @primary-color;
      }
    }

    &-active {
      border-color: @primary-color;
      background-color: @primary-color;
      color: @page-item-font-active-color;
      p, &:hover p {
          color: @page-item-font-active-color;
      }
    }
  }

  &-item-jump-prev, &-item-jump-next {
    margin-right: 5px;
    &:after {
      content: "\e64c";
      font-family: "iconfont" !important;
      font-size: 14px;
      font-style: normal;
   }
    i{
        display: none;
    }
  }

  &-prev-text, &-next-text{
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    width: 80px;
    height: 40px;
    line-height: @page-btn-circle-size-small;
    list-style: none;
    text-align: center;
    cursor: pointer;
    color: @page-item-border-color;
    font-family: @font-family;
    font-size: @font-size-base;
    border: 1px solid @border-color-base;
    border-radius: @page-btn-border-radius;
    transition: all @transition-time @ease-in-out;
    margin-left: 10px;
  }
  &-prev-text{
    margin-right: 10px;
  }
  &-prev &-prev-text{
    padding-right: 4px;
  }
  &-prev,
  &-next,
  &-item-jump-prev,
  &-item-jump-next {
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    min-width: @page-btn-circle-size-small;
    height: @page-btn-circle-size-small;
    line-height: @page-btn-circle-size-small;
    list-style: none;
    text-align: center;
    cursor: pointer;
    color: @page-item-border-color;
    font-family: @font-family;
    border: 1px solid @border-color-base;
    border-radius: @page-btn-border-radius;
    transition: all @transition-time @ease-in-out;
  }

  &-prev {
    margin-right: 5px;
  }

  &-prev,
  &-next {
    p{
      padding: 0 20px;
      color: #666;
      font-size: @font-size-base;
    }
    &:hover{
      border-color: @primary-color;
      p{
        color: @primary-color;
      }
    }
  }
  
  &-disabled {
    cursor: @cursor-disabled;
    
    a, p {
        color: #ccc;
    }
    &:hover {
        border-color: @border-color-base;
        a, p {
            color: #ccc;
            cursor: @cursor-disabled;
        }
    }
  }

  &-text-disable{
    background-color:rgba(247,249,252,1);
    border-radius:4px;
    border:1px solid rgba(211,219,235,1);
    cursor: @cursor-disabled;
    p {
      color: #D3DBEB;
    }
  }

  &-options {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    &-sizer {
        display: inline-block;
        margin-right: 10px;
    }
    &-select {
      display: inline-block;
      margin-left: 0px;
    }
    &-elevator {
      display: inline-block;
      vertical-align: middle;
      height: @page-btn-circle-size-small;
      input {
        text-align: center;
        .input;
        border-radius: @page-btn-border-radius;
        margin: 0 8px;
        width: 40px;
        height: @page-btn-circle-size-small;
        padding: 2px;
      }
    }
    
  }

  &-ok-div {
    display: inline-block;
    height: @page-btn-circle-size-small;
    margin-left: 10px;
  }
  &-total{
    display: inline-block;
    padding-right: 10px;
    font-family: @font-family;
    font-size: @font-size-base;
  }
  &-custom-text, &-custom-text::hover{
    color: #F12
  }
  .sh-select {
    width: 90px;
    .sh-select-header {
      .header-ul {
        li {
          width: 100%;
        }
      }
    }
  }
}
